<template>
  <div class="container">
    <el-container>
      <el-aside width="200px">
        <div class="left">
          <div class="left1">
            <div class="ico">
              <el-avatar
                shape="square"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
            </div>
            <div class="ico">
              <el-image
                style="width: 30px; height: 30px"
                src="/image/wechat/xiaoxi-bai.png"
              />
            </div>
          </div>
          <div class="left2">
            <div class="search">
              <div class="card">
                <div style="width: 85%; display: inline-block">
                  <el-input
                    v-model="leftSearch"
                    placeholder="搜索"
                    :prefix-icon="Search"
                  />
                </div>
                <div style="display: inline-block; margin-left: 10px">
                  <el-icon @click="jia()" style="top: 3px"
                    ><CirclePlusFilled
                  /></el-icon>
                </div>
              </div>
            </div>
            <div class="person">
              <div
                class="mylist"
                v-for="(item, index) in list.list"
                :key="index"
              >
                <div
                  :class="index == active ? 'active' : ''"
                  @click="dianji(index)"
                >
                  <span
                    style="
                      padding: 13px;
                      margin: 8px;
                      border: 1px solid #f9f9f9;
                    "
                    >{{ reversedMessage(item) }}</span
                  >
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div class="header">
            {{ list.list[active] }}
          </div>
        </el-header>
        <el-main>
          <div class="main"></div>
          <div class="shuru">
            <div class="edit">
              <el-input
                v-model="textarea"
                type="textarea"
                maxlength="1000"
                placeholder="Please input"
                :input-style="{
                  height: '100%',
                  backgroundColor: '#F5F5F5',
                  border: 'none',
                }"
              />
            </div>
            <div class="foter">
              <el-button type="success" plain>发送(S)</el-button>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { Calendar, Search, CirclePlusFilled } from "@element-plus/icons-vue";
import { reactive, ref, computed } from "vue";
const fits = ["fill", "contain", "cover", "none", "scale-down"];

const leftSearch: any = ref("");

let list = reactive({
  list: ["张三", "李四"],
});
const jia = () => {
  console.log(12313);
  // console.log()
  if (leftSearch.value) {
    list.list = [...list.list, leftSearch.value];
  }

  console.log(list);

  // list.push(leftSearch.value)
};
const textarea = ref("");
const active = ref(0);
const dianji: any = (index) => {
  active.value = index;
};

// const reversedMessage = computed((item) => {
//     return "222";
//   });

const reversedMessage = (item) => {
  const hsArr = item.split(""); // 使用','作为分隔符将字符串拆分为一个数组
  let firstHs = hsArr[0].trim();
  return firstHs;
};
</script>

<style scoped lang="scss" >
.container {
  width: 800px;
  height: 600px;
  // padding: 50px;
  border: 1px solid #201e1e;
  margin: auto;
  margin-top: 70px;
  .el-container {
    height: 100%;
    width: 100%;
    background-color: #f5f5f5;
  }
  .el-aside {
    width: 300px;
    height: 100%;
    overflow-y: hidden;
    border: 1px solid #d6d6d6;
    .left {
      display: flex;
      height: 100%;

      .left1 {
        // border: 1px solid red;
        background-color: #2e2e2e;
        width: 30%;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
        // padding-top: 25px;
        .ico {
          margin-top: 15px;
        }
      }
      .left2 {
        border: 1px solid #f3f3f3;
        width: 100%;
        height: 100%;
        .search {
          width: 100%;
          display: inline-block;

          .card {
            background-color: #ffffff;
            padding: 10px;
            // padding:5px;
          }
        }

        .mylist {
          width: 100%;
          // border: 1px solid red;
          height: 60px;
          // text-align: center;
          line-height: 60px;
          background-color: #e7e6e5;
          div:hover {
            background: #b4b1b1;
          }
          div:active {
            background: #ddddde;
          }
          .active {
            background: #c4c4c4;
          }
        }
      }
    }
  }

  .el-container {
    .el-main {
      padding: 0px;
      overflow-y: hidden;
      overflow-x: hidden;
    }
    .el-header {
      width: 100%;
      height: 53px;
      border: 1px solid #e7e7e7;
      line-height: 53px;
    }
    .main {
      border: 1px solid #ececec;
      height: 350px;
    }
    .shuru {
      // display: flex;
      // flex-direction:column;
      height: 200px;
      // height:100%;
      .edit {
        height: 130px;
        padding: 0px;
        width: 100%;
        .el-input {
          border: none;
          height: 100%;
        }
      }
      .foter {
        // position: relative;
        .el-button {
          // margin-left: 111px;
          position: relative;
          top: 20px;
          right: -400px;
          background-color: #e9e9e9;
          border: none;
          color: #84c860;
        }
        .el-button:hover {
          background-color: #c6c5c4;
        }
        height: 100%;
        // border: 1px solid red;
      }
    }
  }
}
</style>
